import 'package:flutter/material.dart';

class FlutterLayoutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('flutterLayoutPage'),
      ),
      body: Container(
        decoration: BoxDecoration(
          color: Colors.white
        ),
        alignment: Alignment.center,
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                ClipOval(
                  child: SizedBox(
                    width: 100.0,
                    height: 100.0,
                    child: Image.network(
                        'http://pic29.nipic.com/20130601/12122227_123051482000_2.jpg',
                      fit: BoxFit.fill,
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.all(10.0),
                  child: ClipRRect(
                    borderRadius: BorderRadius.all(Radius.circular(10.0)),
                    child: Opacity(
                      opacity: 0.6,
                      child: Image.network(
                        'http://pic29.nipic.com/20130601/12122227_123051482000_2.jpg',
                        width: 100.0,
                        height: 100.0,
                      ),
                    ),
                  ),
                )
              ],
            ),
            Container(
              height: 100.0,
              color: Colors.white,
              margin: EdgeInsets.all(10.0),
              child: PhysicalModel(
                color: Colors.transparent,
              borderRadius: BorderRadius.circular(10.0),
                clipBehavior: Clip.antiAlias, //抗锯齿
                child: PageView(
                  children: <Widget>[
                    _item('page1',Colors.red),
                    _item('page2',Colors.blue),
                    _item('page3',Colors.orange),
                  ],
                ),
              ),
            ),
            Column(
              children: <Widget>[
                FractionallySizedBox(
                  widthFactor: 1,
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.red,
                    ),
                    child: Text('宽度盛满'),
                  ),
                ),
                Stack(
                  children: <Widget>[
                    Image.network(
                        'http://pic29.nipic.com/20130601/12122227_123051482000_2.jpg',
                      width: 100,
                        height: 100,
                    ),
                    Positioned(
                      left: 0,
                      bottom: 0,
                      child: Image.network(
                        'http://pic29.nipic.com/20130601/12122227_123051482000_2.jpg',
                        width: 36,
                        height: 36,
                      ),
                    ),
                    Wrap(
                      spacing: 8,
                      runSpacing: 6,
                      children: <Widget>[
                        _chip('Flutter'),
                        _chip('Flutter1'),
                        _chip('Flutter2'),
                        _chip('Flutter3'),
                        _chip('Flutter4 '),
                      ],
                    )
                  ],
                )
              ],
            ),
          ],
        ),
      ),
    );
  }

  _item(String title, Color color) {
    return Container(
      decoration: BoxDecoration(
        color:Colors.green
      ),
      alignment: Alignment.center,
      child: Text(
        title,
        style: TextStyle(
          fontSize: 20.0,
          color: color
        ),
      ),
    );
  }

  _chip(String label) {
    return Chip(
      label: Text(label),
      avatar: CircleAvatar(
        backgroundColor: Colors.blue.shade900,
        child: Text(
          label.substring(0,1),
          style: TextStyle(
            fontSize: 10.0,
          ),
        ),
      ),
    );
  }
}
